<template>
	<view>
		<jiazai v-if="isshow"></jiazai>
		<view v-if="!isshow" class="playlist animated fadeIn fast">
			<view class="all u-f-ac" v-if="!(aid==0&&playListId==0)" @tap="allplay">
				<image src="../../../static/icon/pl-playall.png" mode="widthFix"></image>
				<view class="text"> 播放全部 
				<text style=" padding-left: 8upx; font-size: 24upx;color: #CCCCCC;">
					(共{{privileges.length}}首)</text> 
				</view>
			</view>
			<view class="item u-f-ac" v-for="(item,index) in privileges" 
			:key="index" :data-id="item.id" @tap="toplay">
				<view class="index u-f-ajc">
					<image mode="widthFix" style="width: 50upx;" v-if="item.id==Id"
					src="../../../static/icon/aal.png"></image>
					<text v-else >{{index+1}}</text>
				</view>
				<view class="info">
					<view class="name eps-1">{{item.name}}</view>
					<view class="author u-f-ac">
						<text class="eps-1" v-if="item.author">{{item.author}}</text>
						<text class="eps-1" v-if="item.album">-{{item.album}}</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import jiazai from '../../home/jiazai/jiazai.vue';
	import { mapState } from 'vuex';
	export default {
		components:{
			jiazai
		},
		props:{
			aid:Number,
			playListId:Number,
			daysong:Number,
			privileges:Array,
		},
		data() {
			return {
				isshow:true,
			}
		},
		computed: {
			//将state中的数据扩展出来 mapState返回的是一个对象
			...mapState(['Id']),
		},
		created() {
			setTimeout(v=>{
				this.isshow=false
			},1000)
		},
		methods: {
			toplay(e){
				let {id}=e.currentTarget.dataset;
				//每日歌曲或单曲
				if(this.daysong==1){		
					uni.navigateTo({
						url:'../playing/playing?playId='+id+'&daySongId=1'
					})
				}
				//歌单专辑
				else{
					uni.navigateTo({
						url:'../playing/playing?playId='+id+'&playListId='+this.playListId+'&aid='+this.aid
					})
				}
			},
			allplay(){
				let id=this.privileges[0].id;
				uni.navigateTo({
					url:'../playing/playing?playId='+id+'&playListId='+this.playListId+'&aid='+this.aid
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.playlist{
		.all{
			padding: 12upx;
			border-bottom:1upx solid #CCCCCC;
			image{
				width: 45upx;
			}
			.text{
				flex: 700upx;
				
				padding-left: 15upx;
			}
		}
		.item{
			border-bottom: 1rpx solid #CCCCCC;
			padding: 10upx 0 10upx 0;
			.index{
				flex: 2;
				text-align: center;
				font-size: 36upx;
				color: #CCCCCC;
			}
			.info{
				flex: 16;
				display: flex;
				flex-direction: column;
				width: 0;
				.name{
					
				}
				.author{
					position: relative;
					top:-5upx;
					font-size: 24upx;
					color: #CCCCCC;
				}
			}
		}
	}
</style>
